<template>
 <div class="AlignItems-Box">
   <div class="AlignItems-Title">
     <span>定义项目在交叉轴上如何对齐</span>
       <select @change="getIndex">
          <option v-for="(itme,index) in value" :key="index" :value="itme.value"  >{{itme.value+"/"+itme.Title}}</option>
    </select>
   </div>
   <div class="AlignItems-Coenter" :style="valueClass"> 
      <div class="AlignItems-Coenter-Chid" v-for="(itme,index) in ChidHeight" :key="index" :style="itme.height">{{itme.Vlue}}</div>
   </div>
 </div>
</template>
<script>
         
export default {
  data(){ 

   return {

     value:[
   {value:' flex-start',Title:'交叉轴的起点对齐'},
   {value:'flex-end',Title:'交叉轴的终点对齐'},
   {value:'center',Title:'交叉轴的中点对齐'},
   {value:'baseline',Title:'第一行文字的基线对齐'},
    {value:'stretch',Title:'默认值(auto)'}//如果项目未设置高度或设为auto，将占满整个容器的高度。
 ],
 valueClass:"",
 ChidHeight:[//AlignItems
   {height:'height:20px;',Vlue:'A'},
   {height:'height:30px;',Vlue:'l'},
   {height:'height:40px;',Vlue:'i'},
   {height:'height:50px;',Vlue:'g'},
   {height:'height:60px;',Vlue:'n'},
   {height:'height:70px;',Vlue:'I'},
   {height:'height:80px;',Vlue:'t'},
   {height:'height:90px;',Vlue:'e'},
   {height:'height:20px;',Vlue:'m'},
   {height:'height:40px;',Vlue:'s'}
   
 ]
   
    
   }
  },
 components: {

 },
  beforeCreate:function (){

// 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

 

  },
 created:function (){

 // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，el 属性目前尚不可用。

   this.click(this.key)

  },
  beforeMount:function (){

  },
  methods: {

// 在挂载开始之前被调用：相关的 render 函数首次被调用。

click(Vlue,key){

 this.$store.state.HeaderTitle = "AlignItems"



 },
   getIndex(index) {
       this.valueClass = "align-items:" +index.target.value +";";
       console.log( this.valueClass)
    }

  }

}

</script>

<style lang="scss"  scope>
 .AlignItems-Box {
   flex: 1;
   background-color: orchid;
   display: flex;
   flex-direction: column;
 }
 .AlignItems-Title {
   width: 100%;
   height: 30px;
   display: flex;
   justify-content:space-around;
   align-items: center;
   color: white;
   background-color: blueviolet;
 }
 span{
   font-size: 12px;
 }
 .AlignItems-Coenter {
   flex: 1;
   display: flex;
   background-color: darkmagenta;

 }
 .AlignItems-Coenter-Chid{

   width: 20px;
   text-align: center;
   color: white;
   border: 1px solid salmon;

 }
</style>